<template>
    <div class="min-h-screen py-8">
      <div class="container mx-auto px-4">
        <!-- 返回按钮 -->
        <div class="mb-6">
          <router-link to="/books" class="inline-flex items-center text-blue-600 hover:text-blue-800">
            <i class="fa fa-arrow-left mr-2"></i>
            返回图书列表
          </router-link>
        </div>
        
        <!-- 图书详情 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="grid grid-cols-1 md:grid-cols-3">
            <!-- 图书封面 -->
            <div class="md:col-span-1 bg-gray-100 flex items-center justify-center p-6">
              <img :src="book.cover" alt="Book cover" class="max-h-[400px] shadow-md">
            </div>
            
            <!-- 图书信息 -->
            <div class="md:col-span-2 p-6 md:p-8">
              <div class="mb-4">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">{{ book.title }}</h1>
                <p class="text-lg text-gray-600 mb-3">{{ book.author }}</p>
                
                <!-- 评分 -->
                <div class="flex items-center mb-4">
                  <div class="flex text-yellow-400">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                  <span class="ml-2 text-gray-600">{{ book.rating }} (128 评价)</span>
                </div>
              </div>
              
              <!-- 价格 -->
              <div class="mb-6">
                <div class="flex items-center">
                  <span class="text-2xl font-bold text-blue-600">¥{{ book.price.toFixed(2) }}</span>
                  <span class="ml-2 text-gray-400 line-through">¥129.00</span>
                  <span class="ml-3 bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">
                    节省 ¥29.10
                  </span>
                </div>
                <p class="mt-2 text-sm text-green-600">
                  <i class="fa fa-check-circle mr-1"></i>
                  有货，预计 3-5 天送达
                </p>
              </div>
              
              <!-- 购买选项 -->
              <div class="flex flex-col sm:flex-row gap-4 mb-8">
                <div class="flex items-center border rounded-md">
                  <button @click="decreaseQuantity" class="px-3 py-2 text-gray-500 hover:text-gray-700">
                    <i class="fa fa-minus"></i>
                  </button>
                  <input type="number" v-model="quantity" min="1" class="w-16 text-center py-2 border-x focus:outline-none" />
                  <button @click="increaseQuantity" class="px-3 py-2 text-gray-500 hover:text-gray-700">
                    <i class="fa fa-plus"></i>
                  </button>
                </div>
                
                <button @click="addToCart" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
                  <i class="fa fa-shopping-cart mr-2"></i>
                  加入购物车
                </button>
                
                <button class="w-12 h-12 border rounded-md flex items-center justify-center text-gray-600 hover:text-gray-800">
                  <i class="fa fa-heart-o"></i>
                </button>
              </div>
              
              <!-- 图书详情 -->
              <div class="mb-6">
                <h3 class="text-lg font-medium text-gray-900 mb-3">图书详情</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
                  <div>
                    <p><span class="font-medium text-gray-900">出版社:</span> {{ book.publisher }}</p>
                    <p><span class="font-medium text-gray-900">出版日期:</span> {{ book.publishDate }}</p>
                    <p><span class="font-medium text-gray-900">页数:</span> {{ book.pages }}</p>
                  </div>
                  <div>
                    <p><span class="font-medium text-gray-900">语言:</span> {{ book.language }}</p>
                    <p><span class="font-medium text-gray-900">ISBN:</span> {{ book.isbn }}</p>
                    <p><span class="font-medium text-gray-900">分类:</span> {{ book.category }}</p>
                  </div>
                </div>
              </div>
              
              <!-- 图书简介 -->
              <div>
                <h3 class="text-lg font-medium text-gray-900 mb-3">内容简介</h3>
                <p class="text-gray-600 whitespace-pre-line">{{ book.description }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 相关推荐 -->
        <div class="mt-12">
          <h2 class="text-2xl font-bold text-gray-900 mb-6">相关推荐</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div v-for="relatedBook in relatedBooks" :key="relatedBook.id" class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
              <div class="h-48 overflow-hidden bg-gray-100 flex items-center justify-center">
                <img :src="relatedBook.cover" alt="Book cover" class="h-full w-auto group-hover:scale-105 transition-transform">
              </div>
              <div class="p-4">
                <h3 class="font-medium text-gray-900 line-clamp-1">{{ relatedBook.title }}</h3>
                <p class="text-sm text-gray-500 line-clamp-1">{{ relatedBook.author }}</p>
                <div class="mt-2 flex justify-between items-center">
                  <span class="font-medium text-blue-600">¥{{ relatedBook.price.toFixed(2) }}</span>
                  <router-link :to="`/books/${relatedBook.id}`" class="text-sm text-blue-600 hover:text-blue-800">
                    查看
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useCartStore } from '@/stores/cartStore.js';
  import { getBookById, getRelatedBooks } from '@/services/bookService';
  
  // 获取路由参数和实例
  const route = useRoute();
  const router = useRouter();
  
  // 初始化状态
  const book = ref(null);
  const relatedBooks = ref([]);
  const quantity = ref(1);
  
  // 获取购物车状态
  const cart = useCartStore();
  
  // 页面加载时获取图书数据
  onMounted(async () => {
    try {
      const id = parseInt(route.params.id);
      const bookData = await getBookById(id);
      if (!bookData) {
        router.push('/books');
        return;
      }
      book.value = bookData;
      
      // 获取相关图书
      relatedBooks.value = await getRelatedBooks(id, bookData.category);
    } catch (error) {
      console.error('Failed to fetch book:', error);
      router.push('/books');
    }
  });
  
  // 增加数量
  const increaseQuantity = () => {
    quantity.value++;
  };
  
  // 减少数量
  const decreaseQuantity = () => {
    if (quantity.value > 1) {
      quantity.value--;
    }
  };
  
  // 添加到购物车
  const addToCart = () => {
    if (book.value) {
      cart.addToCart(book.value, quantity.value);
      // 显示添加成功提示
      ElMessage.success('已添加到购物车');
    }
  };
  </script>
  
  <style scoped>
  /* 可以添加自定义样式 */
  </style>
      